<template>
  <a-spin :spinning="confirmLoading">
    <a-row>
      <a-col :span="24">
        <a-form ref="formRef" :model="formData" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="validatorRules">
          <a-divider orientation="left" style="color: brown;">基础form</a-divider>
          <a-form-item label="文本" v-bind="validateInfos.name">
            <a-input v-model:value="formData.name" placeholder="请输入文本" />
          </a-form-item>
          <a-form-item label="密码" v-bind="validateInfos.miMa">
            <a-input-password v-model:value="formData.miMa" placeholder="请输入密码" />
          </a-form-item>
          <a-form-item label="下拉框：">
            <a-select v-model:value="formData.select" @change="formSelectChange">
              <a-select-option value="shanghai">上海</a-select-option>
              <a-select-option value="beijing">北京</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="数值">
            <a-input-number v-model:value="formData.yuanjia" placeholder="请输入数字" style="width: 100%" />
          </a-form-item>
          <a-form-item label="输入2到10位的字母"  v-bind="validateInfos.ywzz">
            <a-input v-model:value="formData.ywzz" placeholder="请输入2到10位的字母"></a-input>
          </a-form-item>
          <a-form-item label="多行文本框">
            <a-textarea v-model:value="formData.dhwb" rows="2" placeholder="请输入多行文本框" />
          </a-form-item>
          <a-divider orientation="left" style="color: brown;">时间相关</a-divider>
          <a-form-item label="日期">
            <a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model:value="formData.riqi" style="width: 100%" />
          </a-form-item>
          <a-form-item label="时间">
            <TimePicker placeholder="请选择时间" v-model:value="formData.shijian" style="width: 100%" />
          </a-form-item>
          <a-form-item label="日期时间">
            <a-date-picker show-time v-model:value="formData.nyrsfm" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
          </a-form-item>
          <a-divider orientation="left" style="color: brown;">封装组件</a-divider>
          <a-form-item label="文件">
            <JUpload v-model:value="formData.wenjian"></JUpload>
          </a-form-item>
          <a-form-item label="字典下拉">
            <JDictSelectTag type="select" v-model:value="formData.xiala" dictCode="sex" placeholder="请选择字典下拉" />
          </a-form-item>
          <a-form-item label="字典单选">
            <JDictSelectTag type="radio" v-model:value="formData.danxuan" dictCode="sex" placeholder="请选择字典单选" />
          </a-form-item>
          <a-form-item label="字典多选">
            <JCheckbox v-model:value="formData.duoxuan" dictCode="urgent_level" placeholder="请选择字典多选" />
          </a-form-item>
          <a-form-item label="开关">
            <JSwitch v-model:value="formData.kaiguan" :options="['1', '0']"></JSwitch>
          </a-form-item>
         
          <a-form-item label="图片">
            <JImageUpload :fileMax="2" v-model:value="formData.tupian"></JImageUpload>
          </a-form-item>
          <a-form-item label="字典表下拉搜索框">
            <JSearchSelect v-model:value="formData.xlss" dict="test_category,name,id" />
          </a-form-item>
          <a-form-item label="popup弹窗">
            <JPopup v-model:value="formData.popup" :fieldConfig="[{ source: 'name', target: 'popup' }, { source: 'id', target: 'popback' },]" code="report_user" :multi="true" :setFieldsValue="setFieldsValue" />
          </a-form-item>
          <a-form-item label="popback">
            <a-input v-model:value="formData.popback" />
          </a-form-item>
          <a-form-item label="部门选择">
            <JSelectDept v-model:value="formData.bmxz" :multi="true" type="array" />
          </a-form-item>
          <a-form-item label="用户选择">
            <JSelectUserByDept v-model:value="formData.yhxz" :multi="true" />
          </a-form-item>
          <a-form-item label="富文本">
            <JEditor v-model:value="formData.fwb" />
          </a-form-item>
          <a-form-item label="markdown">
            <JMarkdownEditor v-model:value="formData.markdownString"></JMarkdownEditor>
          </a-form-item>
          <a-form-item label="省市区JAreaSelect">
            <JAreaSelect v-model:value="formData.shq" placeholder="请输入省市区" />
          </a-form-item>
          <a-form-item label="省市区JAreaLinkage">
            <JAreaLinkage v-model:value="formData.jssq" placeholder="请输入省市区" />
          </a-form-item>
          <a-form-item label="JInputPop">
            <JInputPop v-model:value="formData.ldzje" placeholder="请输入JInputPop" @change="(value) => handleFormChange('ldzje', value)"></JInputPop>
          </a-form-item>
          <a-form-item label="JSelectInput">
            <JSelectInput v-model:value="formData.ldzjs" placeholder="请选择JSelectInput" :options="ldzjsOptions" @change="(value) => handleFormChange('ldzjs', value)"></JSelectInput>
          </a-form-item>
          <a-form-item label="下拉多选">
            <JSelectMultiple v-model:value="formData.zddtjxl" placeholder="请选择下拉多选" dictCode="sex"></JSelectMultiple>
          </a-form-item>
          <a-form-item label="用户">
            <JSelectUser v-model:value="formData.yongHu" placeholder="请选择用户"></JSelectUser>
          </a-form-item>
          <a-form-item label="职务">
            <JSelectPosition v-model:value="formData.zhiWu" placeholder="请选择职务" @change="(value) => handleFormChange('zhiWu', value)"></JSelectPosition>
          </a-form-item>
          <a-form-item label="角色">
            <JSelectRole v-model:value="formData.jueSe" placeholder="请选择角色" @change="(value) => handleFormChange('jueSe', value)"></JSelectRole>
          </a-form-item>
          
          <a-form-item label="JCodeEditor">
            <JCodeEditor v-model:value="formData.zdmrz" placeholder="请输入JCodeEditor" @change="(value) => handleFormChange('zdmrz', value)"></JCodeEditor>
          </a-form-item>
          <a-form-item label="参数">
            <JAddInput v-model:value="formData.jsonParam" placeholder="参数"></JAddInput>
          </a-form-item>
          <div style="width: 100%;text-align: center">
            <a-button type="primary">提 交</a-button>
          </div>
        </a-form>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { defHttp } from '/@/common/util/axios';
import dayjs from 'dayjs';
import { TimePicker, Form } from 'ant-design-vue';
import JCheckbox from '/@/components/Form/src/jeecg/components/JCheckbox.vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
import JSelectUserByDept from '/@/components/Form/src/jeecg/components/JSelectUserByDept.vue';
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
import JMarkdownEditor from '/@/components/Form/src/jeecg/components/JMarkdownEditor.vue';
import JInputPop from '/@/components/Form/src/jeecg/components/JInputPop.vue';
import JSelectInput from '/@/components/Form/src/jeecg/components/JSelectInput.vue';
import JSelectPosition from '/@/components/Form/src/jeecg/components/JSelectPosition.vue';
import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
import JInput from '/@/components/Form/src/jeecg/components/JInput.vue';
import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
import JAreaSelect from '/@/components/Form/src/jeecg/components/JAreaSelect.vue';
import JAreaLinkage from '/@/components/Form/src/jeecg/components/JAreaLinkage.vue';
import JSelectRole from '/@/components/Form/src/jeecg/components/JSelectRole.vue';
import JCodeEditor from '/@/components/Form/src/jeecg/components/JCodeEditor.vue';
import JAddInput from '/@/components/Form/src/jeecg/components/JAddInput.vue';
import { getValueType } from '/@/utils';

import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构

const emit = defineEmits(['register', 'ok']);
//update-begin---author:wangshuai ---date:20220616  for：报表示例验证修改--------------
const formData = reactive<Record<string, any>>({
  name: '',
  miMa: '',
  ywzz: '',
  xiala: '',
  danxuan: '',
  duoxuan: '',
  riqi: '',
  shijian: '',
  wenjian: '',
  tupian: '',
  dhwb: '',
  xlss: '',
  popup: '',
  flzds: '',
  yhxz: '',
  fwb: '',
  shq: '',
  ldzje: '',
  ldzjs: '',
  zddtjxl: '',
  yongHu: '',
  zhiWu: '',
  jueSe: '',
  zdys: '',
  jssq: '',
  zdbxl: '',
  zdmrz: '',
  jsonParam: '',
  bmxz: '',
  yuanjia: '',
  nyrsfm: '',
});
const formRef = ref();
const useForm = Form.useForm;
const url = reactive<any>({
  add: '/test/oneNative/add',
  edit: '/test/oneNative/edit',
});
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
  name: [{ required: true, message: '请输入文本!' }],
  miMa: [{ required: true, message: '请输入密码!' }],
  ywzz: [{ required: false }, { pattern: '^[a-z|A-Z]{2,10}$', message: '只能输入2-10位的字母!' }],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
const ldzjsOptions = ref([
  { label: '男', value: '1' },
  { label: '女', value: '2' },
]);

/**
 * 表单下拉框切换
 */
 function formSelectChange(e, option) {
  console.log('下拉框切换：', option);
  $message.info('下拉框切换了....' + e);
}

/**
 * 新增
 */
function add() {
  edit({});
}

/**
 * 编辑
 */
function edit(record) {
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, record);
  });
}

/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  //update-begin---author:wangshuai ---date:20220616  for：报表示例验证修改------------
  await validate();
  confirmLoading.value = true;
  let httpurl = '';
  let method = '';
  //时间格式化
  let model = formData;
  if (!model.id) {
    httpurl += url.add;
    method = 'post';
  } else {
    httpurl += url.edit;
    method = 'put';
  }
  //循环数据如果是数组
  for (let data in formData) {
    //如果该数据是数组并且是字符串类型
    if (formData[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        formData[data] = formData[data].join(',');
      }
    }
  }
  defHttp.request(
    {
      url: httpurl,
      params: model,
      method: method,
    },
    { isTransformResponse: false }
  ).then((res) => {
    if (res.success) {
      $message.success(res.message);
      emit('ok');
    } else {
      $message.warning(res.message);
    }
  }).finally(() => {
    confirmLoading.value = false;
  });
}

/**
 * popup成功回调事件
 */
function popupHandleSuccess(values) {
  Object.assign(formData, values);
}

/**
 *  popup组件值改变事件
 */
function setFieldsValue(map) {
  Object.keys(map).map((key) => {
    formData[key] = map[key];
  });
}

/**
 * 值改变事件触发
 * @param key
 * @param value
 */
function handleFormChange(key, value) {
  formData[key] = value;
}

//暴露方法给父组件
defineExpose({
  add,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  padding: 24px 24px 24px 24px;
}
</style>
